<template>
    <div class="container-box">
        <el-container>
            <el-header>Header</el-header>
            <el-container>
                <el-aside width="200px">
                    <el-menu
                        default-active="2"
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        @close="handleClose"
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b"
                        router
                        :unique-opened='true'
                    >
                        <el-submenu
                            :index="item.path"
                            v-for="(item, index) in menusList"
                            :key="index"
                        >
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>{{item.authName}}</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item
                                    :index="item2.path"
                                    v-for="(item2, index2) in item.children"
                                    :key="index2"
                                >{{item2.authName}}</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
           
<script>
import { menus_api } from "@/api";
export default {
  data() {
    return {
      menusList: []
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },

    /* 获取左侧数据 */
    async getMenusList() {
      const { data: res } = await menus_api();
      console.log(res, 777);
      if (res.meta.status == 200) {
        this.menusList = res.data;
      }
    }
  },

  created() {
    this.getMenusList();
  }
};
</script>
<style scoped  lang='less'>
.container-box {
  height: 100%;
  background-color: pink;

  .el-aside {
    background-color: rgb(84, 92, 100);
  }
}
</style>